<template>
	<view>
		<view class="content-item"
			style="display: flex;justify-content: space-between;height: 150upx;line-height: 150upx;">
			<image src="@/static/img/videos/jubao-light.png" mode="" class="content-item-title-img"></image>
			<view class="content-item-content" style="line-height: 50upx;">
				您的举报我们将尽快受理，核实后我们将第一时间告知受理结果，请尽量提交完整的举报描述。
			</view>
		</view>

		<view class="content-item" style="border-top: 2upx solid #dfdfdf;height: 80upx;line-height: 80upx;">
			<text style="font-size: 30upx;margin-right: 30upx;">举报理由</text>
			<text style="font-size: 30upx;">{{type}}</text>
		</view>

		<view class="" style="border-top: 2upx solid #dfdfdf;padding:20upx">
			<view class="" style="width: 100%;font-size: 30upx;height: 80upx;line-height: 80upx;">举报描述（非必填）</view>
			<view class="input-box" style="">
				<textarea auto-height disable-default-padding auto-focus show-confirm-bar placeholder="详细描述举报理由"
					class="input" v-model="content" style="font-size: 28upx;"></textarea>
			</view>
		</view>

		<view class="login">
			<view class="login-content" @tap="submit()">
				提 交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '视频举报',
				id: 0,
				touid: 0,
				type: '',
				content: ''
			}
		},

		computed: {
			...mapState(['hasLogin'])
		},

		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			if (!!options.id) {
				this.id = options.id
			}

			if (!!options.touid) {
				this.touid = options.touid
			}
			
			console.log(options)
			console.log(this.touid)

			this.type = uni.getStorageSync('report-type')
		},
		methods: {
			...mapMutations(['login', 'logout']),

			async submit() {
				let dataObj = {
					token: uni.getStorageSync('token'),
					video_id: this.id,
					touid: this.touid,
					type: this.type,
					content: this.content
				}

				let res = await this.$myRequest({
					url: '/add_report',
					methods: "POST",
					data: dataObj
				})
				if (res.data.status == 1) {
					this.$api.msg('举报成功，等待审核')
					let url = '/pages/videos/videos-list';
					// #ifdef APP-PLUS
					url = '/pages/videos/videos-list-app';
					// #endif
					console.log(url)
					setTimeout(() => {
						uni.navigateTo({
							url: url
						})
					}, 1500)
				}
			},
		}
	}
</script>
<style lang='scss'>
	.flex-1 {
		flex: 1;
	}

	.d-flex {
		display: flex;
	}

	.place {
		// #ifdef H5
		height: 100upx;
		// #endif
		// #ifdef MP-WEIXIN
		height: 160upx;
		// #endif

		// #ifdef APP-PLUS
		height: 160upx;
		// #endif
	}

	.content-item {
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.content-item-title {
		display: flex;
		align-items: center;

	}

	.content-item-title-text {
		font-size: 28upx;
		margin-right: 10upx;
	}

	.content-item-title-img {
		width: 40upx;
		height: 40upx;
	}

	.content-item-content {
		width: 90%;
		font-size: 28upx;
	}

	.content-item-content-text {
		font-size: 30upx;
	}

	.login {
		padding-top: 48rpx;
		position: absolute;
		bottom: 50upx;
		width: 80%;
		margin-left: 10%;

		.login-content {
			background-color: #f3431a;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			font-size: 30upx;
		}

	}
</style>